
<script setup>
const data = [
  {
    label: '第一阶段 Java基础语法',
    finished: true,
    children: [
      {
        label: '初识Java',
        finished: true
      },
      {
        label: '变量与运算符',
        finished: true
      },
      {
        label: '流程控制语句',
        finished: true
      },
      {
        label: '循环语句',
        finished: true
      },
      {
        label: '数组',
        finished: true
      },
      {
        label: '面向对象-类与对象'
      },
      {
        label: '面向对象-基础'
      },
      {
        label: '面向对象-封装与继承'
      },
      {
        label: '面向对象-抽象类与接口'
      },
      {
        label: '面向对象-多态与内部类'
      }
    ]
  },{
    label: '第二阶段 Java高级API',
    children: [
      {
        label: '常用类1'
      },
      {
        label: '常用类2'
      },
      {
        label: '集合与泛型1'
      },
      {
        label: '集合与泛型2'
      },
      {
        label: '异常与IO'
      },
      {
        label: 'XML&正则表达式'
      },
      {
        label: '反射'
      },
      {
        label: 'JDK新特性'
      },
      {
        label: '综合项目'
      }
    ]
  }]

  //对已经学过的课程变灰处理
  const customNodeClass = (data, node)=>{
    if(data.finished){
      return "finished"
    }
    return "unfinished"
  }

  //课程点击事件
  const nodeClick = (node, nodeAttr, TreeNode, event) => {
    console.log(node)
    console.log(nodeAttr)
    console.log(TreeNode)
    console.log(event)
  }
</script>

<template>
  <div class="left">
    <el-tree
        style="max-width: 600px"
        :data="data"
        default-expand-all
        @node-click="nodeClick"
        :props="{class: customNodeClass}"
    />
  </div>
  <div class="right">

  </div>
</template>

<style>
.left {
  width: 300px;
  border-right: 1px solid #BBBBBB;
  box-sizing: border-box;
  padding-top: 50px;
  padding-left: 50px;
}

.finished{
  color: #d3d3d3;
}

.unfinished{
  color: #606266;
}
</style>
